<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第五个 ECharts 实例  环形图 </title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/5.1.1/echarts.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <dvi class="container">
        <div class="container">
            <label>Apache ECharts 5 - 环形图 </label>
        </div>

        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="echartsDemo" class="breadcrumb" style="width: 600px;height:400px;"></div>
    </dvi>
   
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echartsDemo'));
 
        myChart.setOption({
                tooltip: {
                    // 提示框
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        // 饼图 环形图
                        name: '访问来源',
                        type: 'pie',
                        // radius 饼图半径
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 1048, name: '搜索引擎1'},
                            {value: 735, name: '直接访问2'},
                            {value: 580, name: '邮件营销'},
                            {value: 484, name: '联盟广告'},
                            {value: 300, name: '视频广告'}
                        ]
                    }
                ]
        })
    </script>
</body>
</html>